var vm = new Vue({
    el: '#contentContainer',
    data: {
        form: {
            sql: '',
            pageNum: 1,
            pageSize: 20
        },
        rules: {
            sql: [
                {required: true, message: 'sql不能为空', trigger: 'blur'}
            ]
        },
        cols: [],
        tableData: [],
        pageSizes: [20, 30, 40, 50],
        total: 0,
        tableHeight: 400
    },
    mounted: function () {
        //动态计算table的高度
        var winHeight = $(window).height();
        var toolbarHeight = $('#toolbar').height() + 2 || 0;
        var paginationHeight = 32;
        var tableMargin = parseInt($('.dataTable').css('margin-top') || 0)
            + parseInt($('.dataTable').css('margin-bottom') || 0);
        var containerPadding = parseInt($('.contentContainer').css('padding-top') || 0)
            + parseInt($('.contentContainer').css('padding-bottom') || 0);

        this.tableHeight = winHeight - toolbarHeight - paginationHeight
            - tableMargin - containerPadding;
    },
    methods: {
        submitForm: function (formName) {
            var $this = this;

            $this.$refs[formName].validate(function (valid) {
                if (!valid)
                    return false;

                $this.form.pageNum = 1;
                $this.loadData();
            });
        },
        resetForm: function (formName) {
            this.$refs[formName].resetFields();
        },
        loadData: function () {
            var $this = this;

            Common.postJson('/ops/dbquery', $this.form,
                function (response) {
                    if (!response)
                        return;

                    if (response.status == 200) {
                        var result = response.result;
                        $this.tableData = result.data.list;
                        $this.form.pageNum = result.data.pageNum;
                        $this.form.pageSize = result.data.pageSize;
                        $this.total = result.data.total;
                        $this.cols = response.result.cols;
                    } else {
                        $this.total = 0;
                        $this.tableData = [];
                        $this.cols = [];

                        $this.$notify.error({
                            title: '错误',
                            message: response.msg,
                            offset: $("#main", window.parent.document).height() - 115,
                            duration: 3000
                        });
                    }
                });
        },
        onSizeChange: function (size) {
            this.form.pageNum = 1;
            this.form.pageSize = size;
            this.loadData();
        },
        onCurrentChange: function (currentPage) {
            if (this.form.pageNum === currentPage)
                return;

            this.form.pageNum = currentPage;
            this.loadData();
        },
        onExport: function (formName) {
            var $this = this;//获取当前Vue实例对象，在回调函数内部this指向的对象改变

            $this.$refs[formName].validate(function (valid) {
                if (!valid)
                    return false;

                // 测试SQL是否合法以及是否数据为空
                Common.postJson('/ops/dbquery', {
                        sql: $this.form.sql,
                        pageNum: 1,
                        pageSize: 1
                    },
                    function (response) {
                        if (!response)
                            return;

                        if (response.status == 200) {
                            var result = response.result;
                            if (result.data.total == 0) {
                                $this.$notify.info({
                                    title: '消息',
                                    message: '暂无导出数据',
                                    offset: $("#main", window.parent.document).height() - 115,
                                    duration: 3000
                                });
                            } else {
                                var form = $('<form>', {'method': 'POST', 'action': '/ops/dbExport'}).hide();
                                var params = {sql: $this.form.sql};
                                $.each(params, function (k, v) {
                                    form.append($('<input>', {'type': 'hidden', 'name': k, 'value': v}));
                                });
                                $('body').append(form);
                                form.submit();
                                form.remove();
                            }
                        } else {
                            $this.$notify.error({
                                title: '错误',
                                message: response.msg,
                                offset: $("#main", window.parent.document).height() - 115,
                                duration: 3000
                            });
                        }
                    });
            });
        },
    }
});